
<template>
  <div class="edit" v-show="init">
    <div class="edit-title border-bottom">
      <i class="icon-xiangzuo" @click="jumpMyCard"></i>
      <span @click="jumpMyCard">我的名片</span>
    </div>
    <div style="height:1.5rem;"></div>
    <div class="wall">
      <div class="wall-box">
        <div class="pic" @click="arousePic($refs.uploadHead)">
          <img v-show="!showLoading" :src="portrait" alt="">
          <img v-show="showLoading" src="~common/image/loading.gif" alt="">
        </div>
        <div class="item" @click="arousePic($refs.uploadHead)">
          <img src="~common/image/finger.gif" alt="">点击上传头像
        </div>
        <router-link tag="div" to="/personal" class="jumpPersonal">个人中心</router-link>
      </div>
      <input type="file" hidden class="upload-file" ref="upload"
             @change="imgUpload($refs.upload,1)"
             accept="image/*">
      <input type="file" hidden class="upload-file" ref="uploadHead"
             @change="headUpload($refs.uploadHead)"
             accept="image/*">
    </div>


      <div class="contact">
        <div class="box">
          <div class="preview border-bottom">
            <i class="icon-xinghao"></i>
            <label for="name" class="title star">姓名</label>
            <input id="name" type="text" v-model="name" @keyup="press(name,1)" @blur="lose(name,1,false)"
                  @focus="press(name,1)" placeholder="请输入姓名" ref="name">
            <i class="icon-guanbi" v-show="clName" @touchend="name='',lose('',1,false)"></i>
          </div>
          <div class="preview border-bottom">
            <i class="icon-xinghao"></i>
            <label for="phone" class="title star">手机</label>
            <input id="phone" type="number" v-model="phone" @keyup="press(phone,2)" @blur="lose(phone,2,false)"
                  @focus="press(phone,2)" placeholder="请输入手机号" ref="phone"
                  oninput="if(value.length>11)value=value.slice(0,11)">
            <i class="icon-guanbi" v-show="clPhone" @touchend="phone='',lose('',2,false)"></i>
          </div>
          <div class="preview border-bottom">
            <label for="companyName" class="title">公司名称</label>
            <input id="companyName" type="text" v-model="companyName" @keyup="press(companyName,5)"
                  @blur="lose(companyName,5,false)"
                  @focus="press(companyName,5)" placeholder="请输入公司名称">
            <i class="icon-guanbi" v-show="clCompanyName" @touchend="companyName='',lose('',5,false)"></i>
          </div>
          <div class="preview border-bottom">
            <label for="department" class="title">部门</label>
            <div class="dep border">
              <select name="sele" v-model="department" style="border:none" @change="selectDep(department)">
                <option value="总经理">总经理</option>
                <option value="电销部">电销部</option>
                <option value="网销部">网销部</option>
                <option value="技术部">技术部</option>
                <option value="综管部">综管部</option>
                <option value="行政部">行政部</option>
                <option value="人事部">人事部</option>
                <option value="合规部">合规部</option>
                <option value="自定义">自定义</option>
              </select>
            </div>
            <input id="department" class="dep" type="text" v-model="otherDep" @keyup="elsePress(otherDep,6)"
                  @blur="lose(otherDep,6,false)"
                  @focus="press(otherDep,6)" ref="depInput" readonly>
            <i class="icon-guanbi" v-show="clDepartment" @touchend="otherDep='',lose('',6,false)"></i>
          </div>
          <div class="preview">
            <label for="position" class="title">职位</label>
            <input id="position" type="text" v-model="position" @keyup="press(position,7)" @blur="lose(position,7,false)"
                  @focus="press(position,7)" placeholder="请输入职位">
            <i class="icon-guanbi" v-show="clPosition" @touchend="position='',lose('',7,false)"></i>
          </div>
        </div>
      </div>
      <div class="moreInfo" @click="showMoreInfo = true;" v-show="!showMoreInfo">
        <p>更多</p>
        <img src="~common/image/moreInfo.png" alt="">
      </div>
      <div class="contact" v-show="showMoreInfo">
        <div class="box">
          <div class="preview border-bottom">
            <label for="weChat" class="title">微信</label>
            <input id="weChat" type="text" v-model="weChat" @keyup="press(weChat,3)" @blur="lose(weChat,3,false)"
                  @focus="press(weChat,3)" placeholder="请输入微信号">
            <i class="icon-guanbi" v-show="clWeChat" @touchend="weChat='',lose('',3,false)"></i>
          </div>
          <div class="preview border-bottom">
            <label class="title">微信二维码</label>
            <div class="qr border">
              <p v-show="!showQr" @touchend="upload($refs.ewm,2)"><i class="icon-add"></i></p>
              <img :src="qr" v-show="showQr && !showLoadingEWM" @touchend="upload($refs.ewm,2)">
              <img src="~common/image/loading.gif" v-show="showLoadingEWM" @touchend="upload($refs.ewm,2)">
              <input type="file" hidden class="upload-file" ref="ewm"
                    @change="imgUpload($refs.ewm,2)"
                    accept="image/*">
              <div class="delWeChat" @click="delWeChat" v-show="showQr">
                <img src="~common/image/close.png" alt="">
              </div>
            </div>
            <div class="ewmHint" @click="showEewHint = true;">
              <i class="icon-wenhao"></i>如何获取微信二维码？
            </div>
            <yd-popup v-model="showEewHint" position="center" width="90%">
              <p class="showEwmHint">微信二维码图片是通过微信进入到个人中心 "我" 点击头像里面有个二维码名片，进入页面点击右上角三点保存到手机</p>
            </yd-popup>
          </div>
          <div class="preview border-bottom">
            <label for="email" class="title">电子邮箱</label>
            <input id="email" type="text" v-model="email" @keyup="press(email,4)" @blur="lose(email,4,false)"
                  @focus="press(email,4)" placeholder="请输入电子邮箱">
            <i class="icon-guanbi" v-show="clEmail" @touchend="email='',lose('',4,false)"></i>
          </div>
          <div class="grail border-bottom">
            <label for="address" class="title">地址</label>
            <div class="address">
              <i class="icon-xiangyou"></i>
              <input type="text" @click="show=true" class="border" v-model="proLeve"
                    placeholder="请选择所在的省、市、区" readonly>
              <textarea id="address" class="border" v-model="address"
                        @keyup="elsePress(address,13)" placeholder="请输入详细地址"></textarea>
            </div>
            <yd-cityselect v-model="show" :callback="result1" :items="district"
                          :provance="this.province"
                          :city="this.city"
                          :area="this.area">
              <!--province: localStorage.getItem('province'),//省
          city: localStorage.getItem('city'),//市
          area: localStorage.getItem('area'),//区-->
            </yd-cityselect>
          </div>
          <div class="preview border-bottom">
            <label for="telephone" class="title">固定电话</label>
            <input id="telephone" type="text" v-model="telephone" @keyup="press(telephone,8)"
                  @blur="lose(telephone,8,false)"
                  @focus="press(telephone,8)" placeholder="请输入座机号码">
            <i class="icon-guanbi" v-show="clTelephone" @touchend="telephone='',lose('',8,false)"></i>
          </div>
          <div class="preview ">
            <label for="url" class="title">网址</label>
            <input id="url" type="text" v-model="url" @keyup="press(url,9)" @blur="lose(url,9,false)"
                  @focus="press(url,9)" placeholder="请输入网址">
            <i class="icon-guanbi" v-show="clUrl" @touchend="url='',lose('',9,false)"></i>
          </div>
        </div>
      </div>
      <div class="box" v-show="showMoreInfo">
        <div class="preview border-bottom">
          <label for="qq" class="title">QQ</label>
          <input id="qq" type="text" v-model="qq" @keyup="press(qq,10)" @blur="lose(qq,10,false)"
                @focus="press(qq,10)" placeholder="请输入QQ号码">
          <i class="icon-guanbi" v-show="clQQ" @touchend="qq='',lose('',10,false)"></i>
        </div>
        <div class="preview border-bottom">
          <label for="microblog" class="title">微博</label>
          <input id="microblog" type="text" v-model="microblog" @keyup="press(microblog,11)"
                @blur="lose(microblog,11,false)"
                @focus="press(microblog,11)" placeholder="请输入微博链接">
          <i class="icon-guanbi" v-show="clMicroblog" @touchend="microblog='',lose('',11,false)"></i>
        </div>
        <div class="grail border-bottom">
          <label for="description" class="title">个人说明</label>
          <textarea id="description" class="border" v-model="description"
                    @keyup="elsePress(description,12)" placeholder="请输入自我介绍"></textarea>
        </div>
        <!-- 自定义标签 -->
        <div class="Custom-title" >
          <div class="user-defined ">
              <span> 自定义</span>
              <small id="add" @click="add" v-show="divshow">增加</small>
          </div>
          <div class="custom"  v-for="(item,index) in arry" >
            <input class="custom-ipt" placeholder="自定义标题" v-model="item.extitle">
            <textarea class="custom-text" placeholder="请输入你的内容" v-model="item.exvalue"></textarea>
            <ul>
              <li> <img src="~common/image/add1.png" @click="add(index)"> </li>
              <li > <img src="~common/image/subtract.png" @click="reduce(index)"> </li>
            </ul>
          </div>
        </div>

        <div class="hideMoreInfo"  @click="showMoreInfo = false;">
          <span>收起 <img src="~common/image/hideMoreInfo.png" alt=""></span>
        </div>

      </div>
          <!-- 保存 -->
      <div class="btn">
        <p @click="submit">保存</p>
      </div>

    <!--loading加载-->
    <Loading v-show="loading"></Loading>
  </div>
</template>
<script>
  import {cardEditInit, editSubmit} from 'common/js/business'
  import {mapGetters, mapMutations} from 'vuex'
  import District from 'ydui-district/dist/jd_province_city_area_id';
  import {startUpload} from 'common/js/imgUpload'
  import {islogin, isTourist} from 'common/js/user'
  import {setTitle} from 'common/js/title'
  import Loading from 'components/loading/Loading'
  import {computePV} from 'common/js/statistics'
  import flash from '../../../../public/static/xheditor/xheditor_skin/vista/img/flash.gif';
  export default {
    data() {
      return {
        init: false,
        portraitId: localStorage.getItem('portraitId'),//头像id
        portrait: localStorage.getItem('portrait'),//头像
        clName: false,
        name: localStorage.getItem('name'), //姓名
        clPhone: false,
        phone: localStorage.getItem('phone'),//手机
        clWeChat: false,
        weChat: localStorage.getItem('weChat'),// 微信
        showQr: false,
        qr: localStorage.getItem('qr'),//微信二维码
        qrId: localStorage.getItem('qrId'),//微信二维码id
        clEmail: false,
        email: localStorage.getItem('email'),//邮箱
        clCompanyName: false,
        companyName: localStorage.getItem('companyName'), //公司名称
        clDepartment: false,
        department: localStorage.getItem('department'), //部门
        otherDep: localStorage.getItem('otherDep'),//其他部门
        clPosition: false,
        position: localStorage.getItem('position'), //职位
        clProleve: false,
        proLeve: localStorage.getItem('proLeve'), //省级联动
        province: localStorage.getItem('province'),//省
        city: localStorage.getItem('city'),//市
        area: localStorage.getItem('area'),//区
        clAddress: false,
        address: localStorage.getItem('address'), //地址
        clTelephone: false,
        telephone: localStorage.getItem('telephone'), //固定电话
        clUrl: false,
        url: localStorage.getItem('url'), //网址
        clQQ: false,
        qq: localStorage.getItem('qq'), //QQ
        clMicroblog: false,
        microblog: localStorage.getItem('microblog'), //微博
        description: localStorage.getItem('description'), //个人说明
        show: false,//显示省级联动
        district: District, //省级联动数据库
        showLoading: false,//显示图片上传加载loading
        showLoadingEWM: false,//显示二维码图片上传加载loading
        showEewHint: false, //显示二维码提示
        showMoreInfo: true, //显示更多信息;
        arry:[],
        divshow:true,    //div显示显示
      }
  
    },
    mounted() {
      computePV({
        page_type:10
      })
      setTitle('名片编辑');
      //判断是否游客登录
      isTourist().then(res => {
        if (res.status === 1) {
          if (res.data !== 1) {
            this.$router.push('/login');
          } else {
            cardEditInit({
              phpsid: localStorage.getItem('token'),
              card_id: this.$route.params.id,

            }).then(res => {
              if (res.status === -1) {
                this.$router.push('/personal');
              } else if (res.status === 1) {
                this.init = true;
                this.arry = res.data.extends ;
                // console.log(this.arry.length);
                if(this.arry.length > 0){
                  this.divshow = false;
                }else{
                  this.divshow = true;
                }
              }
            })
          }
        }
      })
      //头像
      if (this.editBusiness.head_img) {
        if (this.editBusiness.head_img.path) {
          localStorage.setItem('portrait', this.editBusiness.head_img.path);
          localStorage.setItem('portraitId', this.editBusiness.head_img.id);
          this.portrait = this.editBusiness.head_img.path;
          this.portraitId = this.editBusiness.head_img.id;
        }
      }

      //默认头像
      if (!localStorage.getItem('portrait')) {
        this.portrait = require('../../common/image/initPic.png');
      }
      //姓名保存
      if (this.editBusiness.name !== '' && this.editBusiness.name != null) {
        localStorage.setItem('name', this.editBusiness.name)
        this.name = this.editBusiness.name;
      }
      //手机保存
      if (this.editBusiness.moblie_phone !== '' && this.editBusiness.moblie_phone != null) {
        localStorage.setItem('phone', this.editBusiness.moblie_phone)
        this.phone = this.editBusiness.moblie_phone;
      }
      //微信保存
      if (this.editBusiness.weixin !== '' && this.editBusiness.weixin != null) {
        localStorage.setItem('weChat', this.editBusiness.weixin)
        this.weChat = this.editBusiness.weixin;
      }
      //微信二维码
      if (this.editBusiness.wx_image) {
        if (this.editBusiness.wx_image.path) {
          localStorage.setItem('qr', this.editBusiness.wx_image.path);
          localStorage.setItem('qrId', this.editBusiness.wx_image.id);
          this.qr = this.editBusiness.wx_image.path;
          this.qrId = this.editBusiness.wx_image.id;
        }
      }
      if (localStorage.getItem('qr')) {
        this.showQr = true;
      }
      //电子邮箱
      if (this.editBusiness.email !== '' && this.editBusiness.email != null) {
        localStorage.setItem('email', this.editBusiness.email)
        this.email = this.editBusiness.email;
      }
      //公司名称
      if (this.editBusiness.company !== '' && this.editBusiness.company != null) {
        localStorage.setItem('companyName', this.editBusiness.company)
        this.companyName = this.editBusiness.company;
      }
      //部门
      if (this.editBusiness.department !== '' && this.editBusiness.department != null) {
        localStorage.setItem('department', this.editBusiness.department)
        this.department = this.editBusiness.department;
      }
      //部门其他
      if (this.department == null || this.department === '') {
        localStorage.setItem('department', '总经理')
        this.department = '总经理';
      } else {
        this.department = '自定义';
        this.otherDep = this.editBusiness.department;
        localStorage.setItem('otherDep', this.editBusiness.department);
      }

      //部门
      if (this.department === '自定义') {
        this.$refs.depInput.removeAttribute('readonly');
        this.$refs.depInput.setAttribute('placeholder', '自定义部门')
      }
      //职位
      if (this.editBusiness.position !== '' && this.editBusiness.position != null) {
        localStorage.setItem('position', this.editBusiness.position)
        this.position = this.editBusiness.position;
      }
      //省级联动
      if (this.editBusiness.areaid_1 !== '' && this.editBusiness.areaid_1 != null) {
        var province = this.editBusiness.areaid_1 + ' ' + this.editBusiness.areaid_2 + ' ' + this.editBusiness.areaid_3;
        localStorage.setItem('proLeve', province)
        localStorage.setItem('province', this.editBusiness.areaid_1)
        localStorage.setItem('city', this.editBusiness.areaid_2)
        localStorage.setItem('area', this.editBusiness.areaid_3)
        this.proLeve = province;
        this.province = this.editBusiness.areaid_1;
        this.city = this.editBusiness.areaid_2;
        this.area = this.editBusiness.areaid_3;
      }
      //地址
      if (this.editBusiness.address !== '' && this.editBusiness.address != null) {
        localStorage.setItem('address', this.editBusiness.address)
        this.address = this.editBusiness.address;
      }
      //固定电话
      if (this.editBusiness.telephone !== '' && this.editBusiness.telephone != null) {
        localStorage.setItem('telephone', this.editBusiness.telephone)
        this.telephone = this.editBusiness.telephone;
      }
      //网址
      if (this.editBusiness.homepage_url !== '' && this.editBusiness.homepage_url != null) {
        localStorage.setItem('url', this.editBusiness.homepage_url)
        this.url = this.editBusiness.homepage_url;
      }
      //QQ
      if (this.editBusiness.qq !== '' && this.editBusiness.qq != null) {
        localStorage.setItem('qq', this.editBusiness.qq)
        this.qq = this.editBusiness.qq;
      }
      //微博
      if (this.editBusiness.weibo !== '' && this.editBusiness.weibo != null) {
        localStorage.setItem('microblog', this.editBusiness.weibo)
        this.microblog = this.editBusiness.weibo;
      }
      //个人说明
      if (this.editBusiness.intro !== '' && this.editBusiness.intro != null) {
        localStorage.setItem('description', this.editBusiness.intro)
        this.description = this.editBusiness.intro;
      }
      //头像截取
      if (this.pitchHeadPic) {
        localStorage.setItem('portrait', this.pitchHeadPic);
        localStorage.setItem('portraitId', this.pitchHeadPicid);
        this.portrait = this.pitchHeadPic;
        this.portraitId = this.pitchHeadPicid;
      }
    },
    computed: {
      ...mapGetters([
        'editBusiness',
        'initEditBusiness',
        'pitchHeadPic',
        'pitchHeadPicid',
        'loading',
      
      ]),
    },
    methods: {
            
      // 添加自定义
      add(index){
        //  console.log(this.arry.length);
         if(this.arry.length >= 0){
              this.divshow = false;
          }else{
             this.divshow = true;
          }
        this.arry.splice(Number(index+1),0,{
          extitle:'',
          exvalue:''
        });  
      },
      // 减少
      reduce(index){
          // console.log(this.arry.length);
          if(this.arry.length == 1){
              this.divshow = true;
          }else{
             this.divshow = false;
          }
          this.arry.splice(index, 1);  //输出对应的div
      },
      //跳转到名片a
      jumpMyCard() {
        this.$router.push('/business/' + this.$route.params.id)
      },
      //删除微信二维码
      delWeChat() {
        this.$dialog.confirm({
          title: '',
          mes: '确定去掉微信二维码？',
          opts: () => {
            localStorage.setItem('qr', '');
            localStorage.setItem('qrId', '');
            this.showQr = false;
            this.qrId = '';
            this.qr = '';
          }
        });

      },
      //提交
      submit() {
        var depar = ''
        if (this.department === '自定义') {
          depar = this.otherDep
        } else {
          depar = this.department
        }
        if (this.name === '') {
          this.$dialog.toast({
            mes: '请输入姓名！',
            timeout: 1000,
          });
          this.$refs.name.focus();
        } else if (!(/^1[34578]\d{9}$/.test(this.phone))) {
          this.$dialog.toast({
            mes: '请输入有效的手机号码！',
            timeout: 1000,
          });
          this.$refs.phone.focus();
        } else {

         var myArray = this.arry;
         var newArray =[];
          var isfag =true;
          for(var i=0;i<myArray.length;i++){
            if(myArray[i].extitle.length==0||myArray[i].exvalue.length==0){
                // isfag = false;
                // break;
                continue;
            }
            newArray.push({extitle:myArray[i].extitle,exvalue:myArray[i].exvalue});
          }
          if(isfag==false){
            this.$dialog.toast({
                mes: '请确保输入自定义标题或者自定义内容完整!',
                timeout: 2000,
                icon: 'warning',
              });
              return false;
          }
          this.$store.dispatch('showLoading');
          editSubmit({
            "phpsid": localStorage.getItem('token'),//session_id
            "name": this.name,//姓名
            "weixin": this.weChat,//微信号
            "moblie_phone": this.phone,//手机号
            "wx_image": this.qrId,//微信二维码，传输的必须是数字，表示图片id
            "department": depar,//部门
            "qq": this.qq,//qq号
            "weibo": this.microblog,//微博
            "address": this.address,//地址
            "homepage_url": this.url,//网址
            "telephone": this.telephone,//电话
            "email": this.email,//邮箱
            "head_img": this.portraitId,//头像，传输的必须是数字，表示图片id
            "company": this.companyName,//公司
            "position": this.position,//职位
            "intro": this.description,//个人说明
            "areaid_1": this.province,
            "areaid_2": this.city,
            "areaid_3": this.area,
            "longitude": "",//经度
            "latitude": "",//纬度
            "extends":newArray


          }).then(res => {
            this.$store.dispatch('hideLoading');
            if (res.status === 1) {
              localStorage.setItem('portraitId', '');
              localStorage.setItem('portrait', '');
              localStorage.setItem('name', '');
              localStorage.setItem('phone', '');
              localStorage.setItem('weChat', '');
              localStorage.setItem('qr', '');
              localStorage.setItem('qrId', '');
              localStorage.setItem('email', '');
              localStorage.setItem('companyName', '');
              localStorage.setItem('department', '');
              localStorage.setItem('otherDep', '');
              localStorage.setItem('position', '');
              localStorage.setItem('proLeve', '');
              localStorage.setItem('province', '');
              localStorage.setItem('city', '');
              localStorage.setItem('area', '');
              localStorage.setItem('address', '');
              localStorage.setItem('telephone', '');
              localStorage.setItem('url', '');
              localStorage.setItem('qq', '');
              localStorage.setItem('microblog', '');
              localStorage.setItem('description', '');
              // localStorage.setItem("extends",'');
              this.$dialog.toast({
                mes: '保存成功',
                timeout: 1000,
                icon: 'success',
                callback: () => {
                  window.history.back();
                }
              });
            } else if (res.status < 0) {
              if (res.expand.type === 1) {
                this.$dialog.alert({mes: res.expand.info});
              } else if (res.expand.type === 2) {
                this.$dialog.alert({mes: res.expand.info});
              } else {
                this.$dialog.toast({
                  mes: res.expand.info,
                  timeout: 1000,
                });
              }
            } else {
              this.$dialog.alert({mes: res.msg});
            }
          }).catch(res => {
            this.$store.dispatch('hideLoading');
            this.$dialog.alert({mes: '非法参数传输错误，保存失败！'});
          })
        }
       
      },
      //选中部门
      selectDep(item) {
        localStorage.setItem('department', item)
        if (this.department === '自定义') {
          this.$refs.depInput.removeAttribute('readonly');
          this.$refs.depInput.setAttribute('placeholder', '自定义部门')
          this.$refs.depInput.focus();
        } else {
          this.$refs.depInput.setAttribute('readonly', 'readonly');
          this.$refs.depInput.setAttribute('placeholder', '')
          localStorage.setItem('otherDep', '');
          this.otherDep = '';
          this.$refs.depInput.blur();
        }
      },
      //其他
      elsePress(val, type) {
        switch (type) {
          case 6:
            return localStorage.setItem('otherDep', val);
          case 12:
            return localStorage.setItem('description', val);
          case 13:
            return localStorage.setItem('address', val);
        }
      },
      //判断是否显示
      press(val, type) {
        if (val === '' || val == null) {
          this.lose(val, type, false)
        } else {
          this.lose(val, type, true)
        }
      },
      //找到对应类型
      lose(val, type, bool) {
        switch (type) {
          case 1:
            localStorage.setItem('name', val);
            return this.clName = bool;
          case 2:
            localStorage.setItem('phone', val);
            return this.clPhone = bool;
          case 3:
            localStorage.setItem('weChat', val);
            return this.clWeChat = bool;
          case 4:
            localStorage.setItem('email', val);
            return this.clEmail = bool;
          case 5:
            localStorage.setItem('companyName', val);
            return this.clCompanyName = bool;
          case 6:
            localStorage.setItem('otherDep', val);
            return this.clDepartment = bool;
          case 7:
            localStorage.setItem('position', val);
            return this.clPosition = bool;
          case 8:
            localStorage.setItem('telephone', val);
            return this.clTelephone = bool;
          case 9:
            localStorage.setItem('url', val);
            return this.clUrl = bool;
          case 10:
            localStorage.setItem('qq', val);
            return this.clQQ = bool;
          case 11:
            localStorage.setItem('microblog', val);
            return this.clMicroblog = bool;
        }
      },
      //地址省级联动
      result1(ret) {
        this.proLeve = ret.itemName1 + ' ' + ret.itemName2 + ' ' + ret.itemName3;
        this.province = ret.itemName1//省
        this.city = ret.itemName2//市
        this.area = ret.itemName3//区
        localStorage.setItem('proLeve', this.proLeve);
        localStorage.setItem('province', this.province);
        localStorage.setItem('city', this.city);
        localStorage.setItem('area', this.area);
      },
      //选中头像上传
      headUpload(item) {
        var file = item.files[0]
        this.getUploadHeadPic(this.getObjectURL(item.files[0]));
        this.$store.dispatch('showLoading');
        this.$router.push('/picCutOut');
        setTimeout(() => {
          this.$store.dispatch('hideLoading');
          this.$router.push('/headCutOut');
        }, 1000)
      },
      getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) {
          url = window.createObjectURL(file)
        } else if (window.URL != undefined) {
          url = window.URL.createObjectURL(file)
        } else if (window.webkitURL != undefined) {
          url = window.webkitURL.createObjectURL(file)
        }
        return url
      },
      //唤起图片上传头像
      arousePic(item) {
        //this.$router.push('/photoWall')
        //修改成直接唤起图片上传
        //this.$router.push('/picCutOut')
        //判断是否是苹果，如果是删除capture属性
        var ua = navigator.userAgent.toLowerCase();
        var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
        if (isIos) {
          item.removeAttribute('capture')
        }
        //点击input上传
        item.click();
      },
      //选中图片上传
      imgUpload(item, type) {
        var _this = this;
        var fileObj = item.files[0];
        var quality = .7;
        if (fileObj.size / 1024 > 1025) {
          quality = .4;
        }
        switch (type) {
          case 1:
            this.showLoading = true;
            break;
          case 2:
            this.showLoadingEWM = true
            break;
        }
        //图片压缩
        this.photoCompress(fileObj, {
          quality: quality
        }, (base64Codes) => {
          let param = new FormData()
          param.append('base64Img', base64Codes)
          startUpload(param).then(res => {
            if (res.status === 1) {
              switch (type) {
                case 1:
                  localStorage.setItem('portrait', res.path);
                  localStorage.setItem('portraitId', res.img_id)
                  this.portraitId = res.img_id;
                  this.portrait = res.path;
                  this.showLoading = false;
                  break;
                case 2:
                  localStorage.setItem('qr', res.path);
                  localStorage.setItem('qrId', res.img_id)
                  this.qr = res.path;
                  this.qrId = res.img_id;
                  this.showQr = true;
                  this.showLoadingEWM = false;
                  break;
              }
            }
          })
        });
      },
      photoCompress(file, w, objDiv) {
        var _this = this;
        var ready = new FileReader();
        /*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/
        ready.readAsDataURL(file);
        ready.onload = function () {
          var re = this.result;
          _this.canvasDataURL(re, w, objDiv)
        }
      },
      //压缩图片
      canvasDataURL(path, obj, callback) {
        var img = new Image();
        img.src = path;
        img.onload = function () {
          var that = this;
          // 默认按比例压缩
          var w = that.width,
            h = that.height,
            scale = w / h;
          w = obj.width || w;
          h = obj.height || (w / scale);
          var quality = 0.7;  // 默认图片质量为0.7
          //生成canvas
          var canvas = document.createElement('canvas');
          var ctx = canvas.getContext('2d');
          // 创建属性节点
          var anw = document.createAttribute("width");
          anw.nodeValue = w;
          var anh = document.createAttribute("height");
          anh.nodeValue = h;
          canvas.setAttributeNode(anw);
          canvas.setAttributeNode(anh);
          ctx.drawImage(that, 0, 0, w, h);
          // 图像质量
          if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
            quality = obj.quality;
          }
          // quality值越小，所绘制出的图像越模糊
          var base64 = canvas.toDataURL('image/jpeg', quality);
          // 回调函数返回base64的值
          callback(base64);
        }
      },
      //点击上传图片
      upload(item) {
        //判断是否是苹果，如果是删除capture属性
        var ua = navigator.userAgent.toLowerCase();
        var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
        if (isIos) {
          item.removeAttribute('capture')
        }
        //点击input上传
        item.click();
      },



    ...mapMutations({
        getUploadHeadPic: 'UPLOAD_HEAD_PIC'
      })
    },
    components: {
      Loading
    },
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  .edit-title
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1.5rem;
    line-height: 1.5rem
    font-size: .55rem;
    color: $color-title;
    background: $background;
    z-index: 99;
    padding-left: 1.3rem;
    i
      position: absolute;
      top: 0;
      left: .5rem;
      line-height: 1.5rem;
      font-size: .6rem;
      color: $color-l-z;
    span
      font-size: .43rem;

  .wall
    position: relative;
    height: 5.12rem;
    background: #f65ecb;
    background: -webkit-linear-gradient(-300deg, #f65ecb, #9366f1);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    .item
      position :relative;
      width: 100%;
      text-align: center;
      color: $color;
      font-size: .34rem;
      img
        position :absolute
        top:-.2rem;
        left:-.2rem;
        width:.5rem;
        height:.5rem;
    .pic
      border: 2px solid #915dee;
      border-radius: 50%;
      margin-bottom: .36rem;
      overflow: hidden;
      width: 2.94rem;
      height: 2.94rem;
      display: flex;
      justify-content: center;
      align-items: center;
      img
        width: 2.64rem;
        height: 2.64rem;
        border-radius: 2.64rem;
    .jumpPersonal
      position: absolute;
      top: .5rem;
      right: .5rem;
      color: $color;
      font-size: .4rem;
    .jumpMyCard
      position: absolute;
      top: .5rem;
      left: .5rem;
      color: $color;
      font-size: .4rem;

  .grail
    position: relative;
    margin: 0 .5rem;
    line-height: 1.45rem;
    font-size: .45rem;
    padding-left: 2.37rem;
    margin-bottom: 0.5rem;
    .title
      position: absolute;
      top: 0;
      left: 0;
      line-height: 1.45rem;
      color: $color-title;
      width: 2.37rem;
    textarea
      width: 100%;
      margin-top: .53rem;
      height: 2rem;
      size: none;
      padding: .2rem;

  .contact
    background: $background-b;
    padding-bottom: .2rem;
    .box
      background: $background;

  .preview
    position: relative;
    margin: 0 .5rem;
    min-height: 1.45rem;
    line-height: 1.45rem;
    font-size: .45rem;
    padding: 0 1rem 0 2.37rem;
    overflow: hidden;
    .dep
      width: 46%;
      line-height: .8rem;
      margin-right: 1%;
      padding: 0 .2rem;
      float: left;
      margin-top: .3rem;
      position: relative;
      select
        width: 100%;
        background: url("~common/image/down.png");
        background-repeat: no-repeat;
        background-position: 100% 50%;
      i
        position: absolute;
        top: 0;
        right: .2rem;
        line-height: .8rem;
    .icon-guanbi
      position: absolute;
      top: 0;
      right: 0;
      width: 1rem;
      line-height: 1.45rem;
      color: $color-b-g;
      font-size: .43rem;
      text-align: center;
    .icon-xinghao
      position: absolute;
      top: 0;
      left: -.4rem;
      line-height: 1.45rem;
      font-size: .18rem;
      color: $color-b-t;
    .title
      position: absolute;
      top: 0;
      left: 0;
      line-height: 1.45rem;
      color: $color-title;
      width: 2.37rem;
    input
      width: 100%;
      line-height: .7rem;
    .qr
      position: relative;
      width: 2.2rem;
      height: 2.2rem;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: .66rem;
      font-size: .86rem;
      color: $color-b-add;
      img
        position: absolute;
        top: 0;
        left: 0;
        width: 2.2rem;
        height: 2.2rem;
    .delWeChat
      position: absolute;
      top: -.3rem;
      right: .2rem;
      img
        width: .6rem
        height: .6rem;

  .address
    position: relative;
    padding-top: 1.3rem;
    color: $color-title;
    input
      position: absolute;
      top: .5rem;
      left: 0;
      right: 0;
      width: 100%;
      padding-left: .2rem;
      line-height: 1.3rem;
      border: none;
    i
      position: absolute;
      top: 0;
      right: .3rem;
      color: $color-text;
      line-height: 2.33rem;
    textarea
      border-top: none;

  .btn
    text-align: center;
    height: 2.56rem;
    display: flex;
    justify-content: center;
    align-items: center;
    p
      width: 3.38rem;
      line-height: 1.35rem;
      border-radius: 1.69rem;
      font-size: .48rem;
      color: $color;
      background: -webkit-linear-gradient(-300deg, #f65ecb, #9366f1);

  .ewmHint
    position: absolute;
    top: 1rem;
    right: 0;
    font-size: .4rem;
    margin-bottom: .2rem;
    background: -webkit-linear-gradient(-300deg, #f65ecb, #9366f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

  .showEwmHint
    line-height: .8rem;
    padding: .5rem;
    background: -webkit-linear-gradient(-300deg, #f65ecb, #9366f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

  .moreInfo
    text-align: center;
    color: $color-input-p;
    font-size: .41rem;
    padding: .5rem 0;
    p
      margin-bottom: .16rem;
    img
      width: .4rem;
      height: .4rem;

  .hideMoreInfo
    padding:0 .5rem;
    text-align:right;
    line-height:1.2rem;
    color: $color-input-p;
    font-size: .41rem;
    img
      width:.35rem;
      height:.35rem;
  .user-defined
    height:1.2rem;
    line-height:30px;
    margin:0 .5rem;
    span
      font-size:0.45rem
      float:left;
    small
      font-size:0.45rem;
      float:right;
  .custom
    position: relative;
    margin-left:.3rem;
    line-height: 1.45rem;
    font-size: 0.45rem;
    padding-left: 2.37rem;
    input
        position: absolute;
        top: 0;
        left: 0;
        line-height: 1.25rem;
        color: #4d4d4d;
        width: 2.37rem;
        border:1px solid #ededed;
        border-radius: 3px;
    textarea
      width: 83%;
      height: 3rem;
      size: none;
      padding: 0.2rem;
      border: 1px solid #ededed !important;
      margin-left:.1rem;
      border-radius: 3px;
    ul 
      width: 13%;
      float: right;
      font-size: .7rem;
      line-height: 20px;
      margin-top:.6rem;
      margin-right: .2rem;
      img
        width:50%;
        margin-left:.2rem;
        margin-top:.2rem;
        cursor: pointer;

  button
      border:1px solid #e2e2e2;
      width:2rem;
      height:1rem;
      margin-left:8.4rem;
      font-size:0.45rem;
      color:#fff;
      border-radius:.2rem;
      background:-webkit-linear-gradient(-300deg, #f65ecb, #9366f1);

</style>
